<template>
  <div class="goodsdetail">
    <header class="header">
      <span class="iconfont icon-zuojiantou2" @click="back"></span>
      <h3 class="iconfont icon-1" @click="share()"></h3>  
      <h2 class="iconfont icon-gouwuchekong" @click ="goCart()"></h2>
    </header>
    <div class="content">
      <mt-swipe :show-indicators="true">
        <mt-swipe-item v-for="(item, index) of bannerlist" :key="index">
          <img :src="item" alt="">
        </mt-swipe-item>
      </mt-swipe>
      <!-- 详情 -->
      <div class="details" v-for="(item, index) of goodsdetail" :key="index">
        <h1>{{ item.pname }}</h1>
        <h2>{{ item.productdesc }}</h2>
        <div class="jgb">
          ￥{{ item.price }}.00
          <span>￥{{ item.price }}.00</span>
          <i>包邮</i>
        </div>
        <div class="jxy">
          <span class="jxy-l">已售{{ item.price }}</span>
          <span class="jxy-r">黑龙江省五常市</span>
        </div>
      </div>
      <!-- 促销 -->
      <div class="promotion">
        <p>
          促销
          <i>满减</i>
          <span>店铺满58减9 满116减20</span>
        </p>
      </div>
      <!-- 配送 -->
      <router-link to = "/citychoice" tag="div" class="peisong">
        <p>
          配送至         
          <span> {{ city }} </span>
          <i class="iconfont icon-youjiantou1"></i>
        </p>
      </router-link>
      <!-- 评论 -->
      <div class="appraise">
        <p>
          评价晒单
          <span>( 26 )</span>
          <i>查看更多</i>
        </p>
        <ul>
          <li>
            <div class="pl1">
              <h1><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></h1>
              <div class="pl2">
                <h5>
                  贰点不腻
                  <em>LV2</em>
                  <span>好评</span>
                </h5>
                <i>郑州市</i>
              </div>
            </div>
            <h2>老人小孩都爱吃，隔壁小孩馋哭了。</h2>
          </li>
          <li>
            <div class="pl1">
              <h1><img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt=""></h1>
              <div class="pl2">
                <h5>
                  贰点不腻
                  <em>LV2</em>
                  <span>好评</span>
                </h5>
                <i>郑州市</i>
              </div>
            </div>
            <h2>老人小孩都爱吃，隔壁小孩馋哭了。</h2>
          </li>
        </ul>
      </div>
      <!-- 店铺 -->
      <div class="store">
        <h4>店铺信息</h4>
        <div class="store1">
          <img src="https://ps.ssl.qhmsg.com/bdr/_240_/t01a3ed9f01264f1d29.jpg" alt="">
          <div class="store2">
            <h5>靓禾良仓官方旗舰店</h5>
            <h6>全部商品  34</h6>
          </div>
          <div class="store3">进店逛逛</div>
        </div>
        <p>
          <span>描述相符  4.7</span>
          <span>服务态度  4.8</span>
          <span>发货速度  4.7</span>
        </p>
      </div>   
    </div>
    <footer class="footer">
      <ul>
        <li>
          <span class="iconfont icon-pinglun"></span>
          <i>联系卖家</i>
        </li>
        <li>
          <span class="iconfont icon-dianpu"></span>
          <i>店铺</i>
        </li>
      </ul>
      <div>
        <p>加入购物车</p>
        <p>立即购买</p>
      </div>
    </footer>
    <mt-popup v-model="popupVisible" position="bottom">
      <ul class="share">
          <li>
            <span class="iconfont icon-pengyouquan1"></span>
            <i>朋友圈</i>
          </li>
          <li>
            <span class="iconfont icon-weixin31"></span>
            <i>微信</i>
          </li>
          <li>
            <span class="iconfont icon---"></span>
            <i>新浪微博</i>
          </li>
          <li>
            <span class="iconfont icon-qq1"></span>
            <i>QQ好友</i>
          </li>
      </ul>
    </mt-popup>
  </div>
</template>

<script>
import Vue from 'vue'
import { Swipe, SwipeItem, Popup } from 'mint-ui'
import axios from 'axios'
Vue.use(Swipe, SwipeItem, Popup)
export default {
  data () {
    return {
      id: '',
      bannerlist: [],
      goodsdetail: [],
      popupVisible: false,
      city: ''
    }
  },
  created () {
    const id = sessionStorage.getItem('id')
    this.id = id
    axios.all([this.getgoodsdetail()]).then(axios.spread((goodsdetail) => {
        console.log(goodsdetail.data.data)
        this.goodsdetail = goodsdetail.data.data
    }))
    axios.all([this.getBannerList()])
      .then(axios.spread((bannerData) => {
        let arr = []
        bannerData.data.map(item => {
          arr.push('/daxun/' + item)
        })
        this.bannerlist = arr
        console.log(arr)
      }))
    const city = sessionStorage.getItem('city')
    if (city) {
      this.city = city
    }
  },
  methods: {
    back () {
      this.$router.go(-1)
    },
    getBannerList () {
      return axios.get('/daxun/banner')
    },
    getgoodsdetail () {
      return axios.get(`http://10.8.162.81:8082/detali?id=${this.id}`)
    },
    goCart () {
      this.$router.push(`/cart`)
    },
    share () {
      this.popupVisible = !this.popupVisible
    }
  }
}
</script>

<style lang="scss" scoped>
.goodsdetail{
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .header{
    height:0.44rem;
    line-height:0.44rem;
    width:100%;
    border-bottom:1px solid #ccc; 
    span{
      font-size:0.2rem;
      float:left;
      color:#1E1E1E;
      margin-left:0.15rem;
    }
    h2{
      float:right;
      font-size:0.18rem;
      color:#1E1E1E;
      margin-right:0.15rem;
    }
    h3{
      float:right;
      font-size:0.18rem;
      color:#1E1E1E;
      margin-right:0.15rem;
    }
  }
  .content{
    background: #f3f3f3;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    .mint-swipe{
      width: 100%;
      height: 2.6rem;
      img{
        height: 2.6rem;
        width: 100%;
      }
    }
    .details{
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem 0.2rem 0.05rem;
      background: #fff;
      margin-bottom: 0.1rem;
      h1{
        color: #000;
        font-size: 0.15rem;
        font-weight: bold;
        margin: 0px 0 0.1rem;
      }
      h2{
        color: #999;
        font-size: 0.12rem;
        line-height: 0.12rem;
        margin-bottom: 0.1rem;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .jgb{
        color: #eb2723;
        font-size: 0.2rem;
        margin-bottom: 0.1rem;
        span{
          color: #999;
          font-size: 0.14rem;
          text-decoration: line-through;
          margin-left: 0.1rem;
        }
        i{
          font-size: 0.1rem;
          height: 0.12rem;
          line-height: 0.12rem;
          color: #f55f60;
          background: #eee;
          padding: 2px 3px 2px 4px;
          border-radius: 4px;
          margin-left: 0.1rem;
        }
      }
      .jxy{
        color: #999;
        font-size: 0.12rem;
        height: 0.14rem;
        line-height: 0.14rem;
        .jxy-l{
          float: left;
        }
        .jxy-r{
          float: right;
        }
      }
    }
    .promotion{
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem 0.2rem;
      background: #fff;
      margin-bottom: 0.1rem;
      p{
        color: #666;
        font-size: 0.14rem;
        span{
          color: #000;
          font-size: 0.14rem;
          margin-left: 0.06rem;
        }
        i{
          font-size: 0.1rem;
          height: 0.12rem;
          line-height: 0.12rem;
          color: #f55f60;
          background: #eee;
          padding: 2px 3px 2px 4px;
          border-radius: 4px;
          margin-left: 0.12rem;
        }
      }
    }
    .peisong{
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem 0.2rem;
      background: #fff;
      margin-bottom: 0.1rem;
      p{
        color: #666;
        font-size: 0.14rem;
        span{
          color: #000;
          font-size: 0.14rem;
          margin-left: 0.06rem;
        }
        i{
          float: right;
          font-size:0.18rem;
          color: #666;
        }
      }
    }
    .appraise{
      width: 100%;
      box-sizing: border-box;
      padding: 0.15rem 0.2rem;
      background: #fff;
      margin-bottom: 0.1rem;
      p{
        color: #333;
        font-weight: bold;
        font-size: 0.16rem;
        margin-bottom: 0.1rem;
        span{
          color: #999;
          font-size: 0.14rem;
          margin-left: 0.06rem;
        }
        i{
          float: right;
          font-size:0.16rem;
          color: #1964C1;
        }
      }
       ul{
        width: 100%;
        li{
          width: 100%;
          padding-bottom:0.1rem;
          padding-top:0.1rem;
          border-bottom:1px solid #999;  
          .pl1{
            width: 100%;
            height: 0.4rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 0.05rem;
            h1{
              img{
                display: block;
                height: 0.3rem;
                width: 0.3rem;
                border-radius: 50%;
              } 
            }
            .pl2{
              width: 86%;
              height: 100%;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              h5{
                color: #333;
                font-size: 0.14rem;
                height: 0.18rem;
                line-height: 0.18rem;
                font-weight: 100;
                em{
                  font-size: 0.1rem;
                  height: 0.12rem;
                  line-height: 0.12rem;
                  color: #f55f60;
                  background: #eee;
                  padding: 0 2px;
                  border-radius: 4px;
                  margin-left: 0.12rem;
                }
                span{
                  float: right;
                  color:  #f55f60;
                  font-size: 0.14rem;
                }
              }
              i{
                font-size: 0.1rem;
                color: #ccc;
              }
            }  
          }
          h2{
            width: 100%;
            font-size: 0.12rem;
          }
        }
        li:last-child{
          border: none;
        }
      }
    }
    .store{
      width: 100%;
      box-sizing: border-box;
      padding: 0.25rem 0.2rem 0.15rem;
      background: #fff;
      border-bottom: 1px solid #ccc;
      margin-bottom: 0.1rem;
      h4{
        color: #333;
        font-weight: bold;
        font-size: 0.18rem;
        margin-bottom: 0.1rem;
      }
      .store1{
        width: 100%;
        height: 0.45rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        img{
          display: block;
          height: 0.3rem;
          width: 0.3rem;
          border-radius: 50%;
        }
        .store2{
          height: 100%;
          width: 60%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          h5{
            font-size: 0.14rem;
          }
          h6{
            font-size: 0.12rem;
            color: #999;
          }
        }
        .store3{
          width: 0.65rem;
          height: 0.2rem;
          line-height: 0.2rem;
          background: orange;
          color: #fff;
          font-size: 0.12rem;
          text-align: center;
          border-radius:0.1rem; 
        }
      }
      p{
        font-size: 0.12rem;
        color: #333;
        display: flex;
        justify-content: space-between;
        padding-top: 0.15rem;
      }
    }
  }
  .footer{
    width:100%;
    height: 0.46rem;
    box-sizing: border-box;
    padding: 0 0.1rem;
    ul{
      width: 28%;
      height: 100%;
      float: left;
      display: flex;
      justify-content: space-around;
      align-items: center;
      li{
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        color: #666;
        box-sizing: border-box;
        padding: 0.02rem 0;
        span{
          font-size: 0.16rem;
          line-height: 0.22rem;
        }
        i{
          font-size: 0.1rem;
          line-height: 0.18rem;
        }
      }
      li:first-child{
        span{
          font-size: 0.18rem;
        }
      }
      li:last-child{
        color: orange;
      }
    }
    div{
      width: 68%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      float: right;
      p{
        height: 0.3rem;
        width: 50%;
        line-height: 0.3rem;
        text-align: center;
        font-size: 0.1rem;
        color: #fff;
      }
      p:first-child{
        border-radius: 0.15rem 0 0 0.15rem;
        background: orange;
      }
       p:last-child{
        border-radius: 0 0.15rem 0.15rem 0;
        background: orangered;
      }
    }
  }
}
.mint-popup{
  width: 95%;
  height: 1.3rem;
  margin-bottom: 0.1rem;
  border-radius: 0.1rem; 
  .share{
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-sizing: border-box;
    padding: 0.1rem 0.1rem;
    li{
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      span{
        font-size: 0.3rem;
      }
      i{
        font-size: 0.12rem;
      }
    }
    li:nth-child(1){
      span{
        color: #40F2FF;
      }
    }
    li:nth-child(2){
      span{
        color: #44C814;
      }
    }
    li:nth-child(3){
      span{
        color: #E73067;
      }
    }
    li:nth-child(4){
      span{
        color: skyblue;
      }
    }
  }
}
</style>